export default function DisplayBox() {
  return (
    <div className="w-[300px] border-2 contents float-right m-3 p-3">
      简单说，指定了 <span className="font-bold">display: contents</span>
      ，则外层的盒子完全以内部content为准，外部配置的一些CSS样式会失效。
      <br />
      比如margin padding float width 等。外层的盒子完全失效。
      <br />
      官方文档专门提到一个Bug， 所有这样的元素会被屏幕阅读器忽略，这是一个明确不符合规范的Bug。
      <div className="inner-div border-red-500 border-2">Inner Div</div>
      <a href="https://devdocs.io/css/display-box" target="_blank" rel="noreferrer">
        参考链接
      </a>
    </div>
  )
}
